<template>
	<view>
		<view class="map-wrap">
			<!-- #ifdef APP-PLUS || H5 -->
			<view id="map-box"></view>
			<!-- #endif -->
		</view>
	</view>
</template>
<script module="mapbox" lang="renderjs">
	import 'mapbox-gl/dist/mapbox-gl.css';
	const mapboxgl = require('!mapbox-gl/dist/mapbox-gl.js');
	export default {
		data() {
			return {
				map: null, //地图实例
				timer: null,
				layerServer: '',
				layerUrl: {
					routeLine: ''
				},
				routePoint: [{
						title: "巡检起点",
						position: [120.467024677679, 36.2589831422648],
					},
					{
						title: "巡检终点",
						position: [120.517906717829, 36.2407259217614],
					}
				]
			}
		},

		mounted() {
			this.initMap()
			this.timer = setInterval(() => {
				this.getRTP()
			}, 5000)
		},
		onUnload() {
			//注销定时器
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
		methods: {
			// 场景地图初始化
			initMap() {
				mapboxgl.accessToken =
					'pk.eyJ1IjoiZmxvd2Vyd2VpIiwiYSI6ImNsYXo3NnN3MDE3ZTUzcGxpNzNncGxxdWYifQ.AWmbnSDKRxSygXxsAkMF9Q';
				// 创建地图
				this.map = new mapboxgl.Map({
					container: 'map-box', // container ID
					style: 'mapbox://styles/mapbox/satellite-v9', // style加载地图的样式
					center: [120.4890512, 36.2491455], // 设置地图的中心点
					projection: 'globe', // 把地图设置为球体
					zoom: 2 // starting zoom
				});
				this.map.on("load", () => {
					this.imageAdd()
					this.layerAdd()
				});
			},
			// 添加图层
			layerAdd() {
				// 巡检轨迹路线图层
				this.map.addLayer({
					id: "mainPipeDown",
					type: 'circle',
					source: {
						type: "geojson",
						data: this.layerServer + this.layerUrl.routeLine,
					},
					layout: {
						"line-cap": "round",
						"line-join": "round",
						"visibility": 'visible',
					},
					paint: {
						"line-color": "#2BFF09",
						'circle-color': ['get', 'color'],
						//多个点渲染不同的颜色
						'circle-radius': ['get', 'size'],
						'circle-stroke-width': 1, //边框
						'circle-stroke-color': '#fff', //边框颜色
						"line-width": 4,
					},
				});
				// 巡检起/终点图层
				this.map.addLayer({
					"id": "routePoints",
					"type": "symbol",
					"source": {
						"type": "geojson",
						"data": {
							"type": "FeatureCollection",
							"features": [{
								"type": "Feature",
								"geometry": {
									"type": "Point",
									"coordinates": this.routePoint[0].position
								},
								"properties": {
									"title": "巡检起点",
									"icon": "route_start"
								}
							}, {
								"type": "Feature",
								"geometry": {
									"type": "Point",
									"coordinates": this.routePoint[1].position
								},
								"properties": {
									"title": "巡检终点",
									"icon": "route_end"
								}
							}]
						}
					},
					"layout": {
						"icon-allow-overlap": true,
						"icon-image": ["get", "icon"],
						"icon-size": 0.4,
					}
				});
				//
			},
			// 添加图层图片
			imageAdd() {
				// 巡检起点icon
				this.map.loadImage("/static/images/tabbar/dt.png", (error, image) => {
					this.map.addImage("route_start", image);
				});
				// 巡检终点icon
				this.map.loadImage("/static/images/tabbar/dt.png", (error, image) => {
					this.map.addImage("route_end", image);
				});
			},
			// 获取当前位置的经纬度
			getRTP() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					}
				});
			}

			//


		}
	}
</script>

<style lang="scss">
	.map-wrap {
		position: relative;
		min-width: 100vw;
		min-height: 100vh;
	}

	#map-box {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
</style>
